<template>
  <div>
    <div class="search-bar">
      <van-row gutter="5">
        <van-col span="3"><i class="address">&#xe633;</i></van-col>
        <van-col span="16">
          <input type="text" class="search-input"/>
        </van-col>
        <van-col span="5">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <!--swipwer area-->
    <div class="swiper-area">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="type-bar">
      <div v-for="(cate,index) in category" :key="index">
        <img v-lazy="cate.image" width="90%"/>
        <span>{{cate.mallCategoryName}}</span>
      </div>
    </div>
    <div class="ad-banner">
      <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>
    <!--商品推荐-->
    <div class="recommend-area">
      <div class="recommend-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in recommendGoods" :key="index">
            <div class="recommend-item">
              <img :src="item.image" alt="" width="80%">
              <div>{{item.goodsName}}</div>
              <div>￥{{item.price | moneyFilter}} (￥{{item.mallPrice | moneyFilter}})</div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!--floor one area-->
      <Floor :floorData="floor1" :floorTitle="floorName.floor1"></Floor>
      <Floor :floorData="floor2" :floorTitle="floorName.floor2"></Floor>
      <Floor :floorData="floor3" :floorTitle="floorName.floor3"></Floor>
    </div>
    <!--Hot Area-->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
        <!--这里需要一个list组件-->
        <van-list>
          <van-row gutter="20">
            <van-col span="12" v-for="(item,index) in hotGoods" :key="index">
              <goodsInfo :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price" :goodsId="item.goodsId"></goodsInfo>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import {toMoney} from '../filter/filterMoney.js'
  import Floor from '../component/floor'
  import goodsInfo from '../component/goodsInfo'
  import RUL from '@/serviveApi.config'
  export default {
    components: {
      swiper,
      swiperSlide,
      Floor,
      goodsInfo
    },
    data() {
      return {
        bannerPicArray: [],
        category: [],
        adBanner: '',
        recommendGoods: [],
        swiperOption: {
          slidesPerView: 3,
//          pagination:{
//            el:'.swiper-pagination',
//            clickable:true
//          }
        },
        floor1: [],
        floor2: [],
        floor3: [],
        floorName: {},
        datas: {},
        hotGoods: [],//热卖商品
        hh:null
      }
    },
    filters: {
      moneyFilter(money){
        return toMoney(money)
      }
    },
    created(){
      axios({
        url: RUL.index,
//      url: ' https://api.myjson.com/bins/133ks2',
        method: 'get',
      })
        .then(response => {
          if (response.status == 200) {
            let datas = response.data.data;
            this.category = datas.category;
            this.adBanner = datas.advertesPicture;
            this.bannerPicArray = datas.slides;
            this.recommendGoods = datas.recommend;
            this.floor1 = datas.floor1;
            this.floor2 = datas.floor2;
            this.floor3 = datas.floor3;
            this.floorName = datas.floorName;
            this.hotGoods = datas.hotGoods;

          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    mounted(){

    },
    watch: {},

  }

</script>
<style scoped>
  .search-bar {
    height: 2.2rem;
    background-color: #e5017d;
    line-height: 2.2rem;
    overflow: hidden;
  }

  .search-input {
    width: 100%;
    height: 1.3rem;
    border: 0;
    border-bottom: 1px solid #fff !important;
    background-color: #e5017d;
    color: #fff;
  }

  .swiper-area {
    width: 100%;
    max-height: 9rem;
    overflow: hidden;
    clear: both;
  }

  .address {
    font-size: 1.5rem;
    color: #fff;
    padding-left: .5rem;
  }

  .type-bar {
    background-color: #fff;
    margin: 0 .3rem .3rem .3rem;
    border-radius: .3rem;
    font-size: 14px;
    display: flex;
    flex-flow: row nowrap;
  }

  .type-bar div {
    padding: .3rem;
    font-size: 12px;
    text-align: center;
  }

  .recommend-area {
    background-color: #fff;
    margin-top: .3rem;
  }

  .recommend-title {
    border-bottom: 1px solid #eee;
    font-size: 14px;
    padding: .2rem;
    color: #e5017d;
  }

  .recommend-body {
    border-bottom: 1px solid #eee;
  }

  .recommend-item {
    width: 99%;

    border-right: 1px solid #eee;
    font-size: 12px;
    text-align: center;
  }

  .hot-area {
    text-align: center;
    font-size: 14px;
    height: 1.8rem;
    line-height: 1.8rem;
  }


</style>
